<template>
      <div class="team-member-container">
        <div class="titl-bar" style="font-size: 30px;text-align: center"><span>团队成员</span></div>
        <el-input placeholder="搜索" v-model="searchQuery" class="search-input"></el-input>
        <el-button @click="handleSearch" icon="el-icon-search">搜索</el-button>
        <el-row :gutter="60" class="member-row">
          <el-col :span="24/membersPerRow" v-for="member in searchResults" :key="member.memberId">
            <router-link :to="{ path: '/RDTeam/growthRecord', query: { id: member.memberId }}">
            <el-card class="member-card" shadow="hover">
              <div class="image-container">
                <img :src="member.pictureUrl" class="image"/>
              </div>
              <div class="text-container">
                <span>姓名：{{ member.name }}</span>
                <span>专业：{{ member.major }}</span>
                <span>加入时间：{{ member.joinTime }}</span>
                <span>擅长：{{ member.expertise }}</span>
                <span>成绩数：{{ member.scores }}</span>
              </div>
            </el-card>

            </router-link>
          </el-col>
        </el-row>
      </div>
</template>

<script>

import { listInfo } from '@/api/team/info'

export default {
  // components: {
  //   SearchResults
  // },
  // 在这里添加你的组件逻辑
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      allMembers: [],
      membersPerRow: 4, // 每行展示的学生数
      defaultImageUrl: ""//图片加载失败
    };
  },
  created() {
    // 当组件创建后，获取查询参数
    this.searchQuery = this.$route.query.q;
    this.fetchMembers().then(() => {
      this.fetchSearchResults(this.searchQuery);
    });
    // 使用this.searchQuery来进行搜索或其他操作
  },
  computed: {
    beforeMount() {
      // 如果没有找到标志或者标志已过期
      if (!sessionStorage.getItem('hasRefreshed')) {
        // 设置刷新标记，避免再次刷新
        sessionStorage.setItem('hasRefreshed', 'true');
        // 进行刷新
        window.location.reload();
      } else {
        // 如果已经刷新过，将标记移除，这样下一次页面刷新会重新触发刷新逻辑
        sessionStorage.removeItem('hasRefreshed');
      }
    }
  },
  watch: {
    // 监听$route.query.q的变化
    '$route.query.q': {
      immediate: true, // 立即执行一次，以便在页面加载时也能获取到参数
      handle() {
        if (this.searchQuery) {
          this.fetchSearchResults(this.searchQuery);
        } else {
          alert('请输入搜索内容');
        }
      },
    },
  },
  methods: {
    handleSearch() {
      if (this.searchQuery) {
        this.fetchSearchResults(this.searchQuery);
      } else {
        alert('请输入搜索内容');
      }
    },
    async fetchMembers() {
      this.loading = true; // 开始加载
      try {
        const response = await listInfo(); // 调用 listInfo 方法并等待响应
        this.allMembers = response.rows ;
      } catch (error) {
        console.error('Error fetching members:', error); // 处理错误
      } finally {
        this.loading = false; // 结束加载
      }
    },
    fetchSearchResults(query) {
      const lowerQuery = query.toLowerCase();
      this.searchResults = this.allMembers.filter(member =>
        (member.name && member.name.toLowerCase().includes(lowerQuery)) ||
        (member.major && member.major.toLowerCase().includes(lowerQuery)) ||
        (member.expertise && member.expertise.toLowerCase().includes(lowerQuery))
      );
    },
    highlight(text, query) {
      if (!query) return text;
      const escapedQuery = this.escapeRegex(query);
      const regex = new RegExp(`(${escapedQuery})`, 'gi');
      return text.replace(regex, `<span style="color: red;">$1</span>`);
    },
    escapeRegex(queryToEscape) {
      return queryToEscape.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
    }
  },
};
</script>

<style>

.line-with-text {
  position: relative;
}

.text-and-line {
  position: relative;
  display: flex;
  align-items: center;
}

.text {
  position: absolute;
  top: -30px;
  left: 0;
  font-size: 24px;
}

.line {
  flex: 1;
  height: 1px;
  background-color: #000000; /* 分割线的颜色 */
  margin-left: 0px; /* 文字右侧的间距 */
}

.titl-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%; /* 确保 .title-bar 占满整个容器的宽度 */
  height: 50px; /* 可以调整高度 */
  margin-bottom: 20px; /* 添加一些底部边距 */
  font-size: 24px; /* 设置文字大小为24像素 */
  font-weight: 600; /* 设置文字加粗 */
}

.team-member-container {
  padding: 20px;
  height: 100%;
  width: 100%;
  max-height: 800px; /* 设置一个最大高度 */
  /*overflow: auto; /* 如果内容超出了最大高度，显示滚动条 */
}

.search-input {
  width: 10%;
  margin-bottom: 20px;
}

.member-row {
  margin-bottom: 20px;
}

.member-card {
  width: 300px;
  min-height: 200px;
  min-width: 200px;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 水平居中对齐所有子元素 */
  margin: 10px 40px;
}

@media (max-width: 600px) {
  .el-col {
    /* 每行显示1个卡片 */
    width: 100%;
  }
}

/* 大于768px且小于等于992px宽的屏幕（例如小桌面） */
@media (min-width: 600px) and (max-width: 992px) {
  .el-col {
    /* 每行显示2个卡片 */
    width: 50%;
  }
}

/* 大于992px且小于等于1200px宽的屏幕（例如中等桌面） */
@media (min-width: 993px) and (max-width: 1200px) {
  .el-col {
    /* 每行显示3个卡片 */
    width: 33.3333%;
  }
}

/* 大于1200px宽的屏幕（例如大桌面） */
@media (min-width: 1201px) {
  .el-col {
    /* 每行显示4个卡片 */
    width: 25%;
  }
}

.member-card div span {
  display: block;
  margin-bottom: 8px; /* 可选：为每个 span 添加底部外边距 */
}

.image-container {
  display: flex;
  justify-content: center; /* 水平居中图片 */
  width: 100%; /* 图片容器宽度 */
  margin-bottom: 10px; /* 图片与文本之间的间距 */
}

.image {
  width: 80%; /* 或其他尺寸 */
  height: auto; /* 高度自动调整以保持宽高比 */
  object-fit: cover; /* 确保图片内容适应容器 */
}

.text-container {
  width: 200px;
  padding: 0 10px;
  text-align: left; /* 文字左对齐 */
  font-size: 16px;
}

</style>
